<template>
  <div class="table-list">
    <el-table
      v-loading="loading"
      border
      stripe
      :data="list"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" align="center" width="55" />
      <el-table-column
        v-for="(item, idx) in field"
        :key="idx"
        align="center"
        :label="item.label"
        :prop="item.prop"
        :formatter="item.formatter"
        :width="item.ext?.controlType === 'ImageUpload' ? 100 : 0"
        show-tooltip-overflow
      >
        <template
          v-if="
            item.ext?.listStatus !== '正常' ||
            item.ext?.needDesensitize ||
            ['ImageUpload', 'VideoUpload', 'FileUpload'].includes(item.ext?.controlType)
          "
          #default="{ row }"
        >
          <el-icon
            v-if="item.ext?.listStatus === '内部链接'"
            class="cursor-pointer"
            color="#60A5FA"
            @click="$router.push({ path: row[item.prop] })"
          >
            <Promotion />
          </el-icon>
          <el-icon
            v-else-if="item.ext?.listStatus === '外部链接'"
            class="cursor-pointer"
            color="#60A5FA"
            @click="openWindow(row[item.prop])"
          >
            <Link />
          </el-icon>
          <template v-if="item.ext?.needDesensitize">
            <span v-if="item.ext?.desensitizationType === 'defaultIdnoDesensitizer'">
              {{ desensitizateNums(row[item.prop]) }}
            </span>
            <span v-else-if="item.ext?.desensitizationType === 'defaultNameDesensitizer'">
              {{ desensitizateNames(row[item.prop]) }}
            </span>
          </template>
          <template v-if="item.ext?.controlType === 'ImageUpload'">
            <ImagePreview :src="row[item.prop]" />
          </template>
          <template v-if="item.ext?.controlType === 'VideoUpload'">
            <VideoPreview :src="row[item.prop]" />
          </template>
          <template v-if="item.ext?.controlType === 'FileUpload'">
            <FilePreview :src="row[item.prop]" />
          </template>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="160">
        <template #default="{ row }">
          <el-button
            v-for="(item, idx) in buttonOptions"
            :key="idx"
            link
            :icon="item.icon"
            :style="item.style"
            @click="item.click(row)"
          >
            {{ item.innerText }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-show="total > 0"
      v-model:current-page="page"
      v-model:page-size="limit"
      class="flex flex-row justify-end my-4"
      :page-sizes="[10, 20, 30, 50]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="getList"
      @current-change="getList"
    />
  </div>
</template>

<script setup>
  import { computed } from 'vue';
  import { openWindow } from '@/utils/base';
  import { desensitizateNums, desensitizateNames } from '@/utils/desensitization';
  import ImagePreview from '@/components/ImagePreview';
  import VideoPreview from '@/components/VideoPreview';
  import FilePreview from '@/components/FilePreview';

  const props = defineProps({
    pageParams: {
      type: Object,
      default: () => ({}),
    },
    loading: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => [],
    },
    field: {
      type: Array,
      default: () => [],
    },
    total: {
      type: Number,
      default: 0,
    },
    permissionPrefix: {
      type: String,
      default: '',
    },
    getList: {
      type: Function,
      default: () => {},
    },
    handleSelectionChange: {
      type: Function,
      default: () => {},
    },
    handleDetail: {
      type: Function,
      default: null,
    },
    handleDelete: {
      type: Function,
      default: null,
    },
    handleUpdate: {
      type: Function,
      default: null,
    },
  });

  const emits = defineEmits(['update:pageParams']);

  const page = computed({
    get() {
      return props.pageParams.pageNum;
    },
    set(val) {
      emits('update:pageParams', {
        pageNum: val,
        pageSize: limit.value,
      });
    },
  });

  const limit = computed({
    get() {
      return props.pageParams.pageSize;
    },
    set(val) {
      emits('update:pageParams', {
        pageNum: page.value,
        pageSize: val,
      });
    },
  });

  const buttonOptions = computed(() => {
    const operationMap = new Map([
      [
        'handleDetail',
        {
          permi: `${props.permissionPrefix}:info`,
          icon: 'View',
          click: props.handleDetail,
          innerText: '查看',
          style: {
            color: '#409EFF',
          },
        },
      ],
      [
        'handleUpdate',
        {
          permi: `${props.permissionPrefix}:edit`,
          icon: 'Edit',
          click: props.handleUpdate,
          innerText: '修改',
          style: {},
        },
      ],
      [
        'handleDelete',
        {
          permi: `${props.permissionPrefix}:delete`,
          icon: 'Delete',
          click: props.handleDelete,
          innerText: '删除',
          style: {
            color: 'red',
          },
        },
      ],
    ]);
    return [...operationMap.keys()].filter((fn) => props[fn]).map((k) => operationMap.get(k));
  });
</script>
